<template>
  <div class="personCard">
    <my-card>
      <template #headInfo>
        <div class="headInfo">
          <i class="fa fa-id-card"></i>
          <span style="margin-left: 10px">个人信息</span>
        </div>
      </template>
      <template #bottomContent>
        <div class="bottomContent">
          <div class="img" @click="showAvatarDialog = !showAvatarDialog">
            <img :src="avatars[userInfo.avatar].url" />
          </div>
          <div class="userInfo">
            <div class="nickName">
              昵称：<span>{{ userInfo.nickName }}</span>
            </div>
            <div class="sex">
              性别：<span>{{ userInfo.sex }}</span>
            </div>
            <div class="email">
              邮箱：<span>{{ userInfo.email }}</span>
            </div>
          </div>
          <el-button
            class="editBtn"
            type="success"
            @click="showDialog = !showDialog"
            >编辑个人信息</el-button
          >
        </div>
      </template>
    </my-card>
    <edit-dialog
      :showDialog="showDialog"
      @sendSaveAndClose="handleChangeUserInfo"
      @sendCloseDialog="showDialog = false"
    />
    <avatar-dialog
      :showAvatarDialog="showAvatarDialog"
      @sendSaveAndClose="handleChangeAvatarInfo"
      @sendCloseDialog="showAvatarDialog = false"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import myCard from "@/components/my/myCard.vue";
import editDialog from "@/components/my/editDialog.vue";
import avatarDialog from "@/components/my/avatarDialog.vue";
import Cache from "@/utils/Cache";
import { ElMessage } from "element-plus";
let showDialog = ref(false);
let showAvatarDialog = ref(false);

const userInfo = reactive({
  nickName: "",
  email: "",
  avatar: 0,
  sex: "",
});
onMounted(() => {
  getUserInfo();
});

const getUserInfo = () => {
  const user = Cache.getItem("user");
  userInfo.nickName = user.nickName;
  userInfo.email = user.email;
  userInfo.avatar = user.avatar;
  if (user.sex === 0) {
    userInfo.sex = "男";
  } else if (user.sex === 1) {
    userInfo.sex = "女";
  } else {
    userInfo.sex = "其他";
  }
};

// 编辑框确认修改
const handleChangeUserInfo = () => {
  showDialog.value = false;
  getUserInfo();
};

// 确认更换头像
const handleChangeAvatarInfo = (index) => {
  userInfo.avatar = index;
  const user = Cache.getItem("user");
  user.avatar = index;
  Cache.saveItem("user", user);
  ElMessage({
    message: "更换成功!",
    type: "success",
    center: true,
  });
  showAvatarDialog.value = false;
};

const avatars = [
  {
    url: require("../../../assets/avatar/1.jpg"),
  },
  {
    url: require("../../../assets/avatar/2.jpg"),
  },
  {
    url: require("../../../assets/avatar/3.jpg"),
  },
  {
    url: require("../../../assets/avatar/4.jpg"),
  },
  {
    url: require("../../../assets/avatar/5.jpg"),
  },
  {
    url: require("../../../assets/avatar/6.jpg"),
  },
  {
    url: require("../../../assets/avatar/7.jpg"),
  },
  {
    url: require("../../../assets/avatar/8.jpg"),
  },
];
</script>

<style scoped lang="less">
.personCard {
  width: 100%;
  margin-top: 30px;
  .headInfo {
    color: rgb(49, 145, 215);
    font-size: 18px;
    letter-spacing: 0.1em;
  }
  .bottomContent {
    position: relative;
    padding: 0 20px;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    .img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 50px;
      box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .userInfo {
      margin-left: 80px;
      div {
        margin-top: 20px;
        font-size: 14px;
        color: rgb(137, 137, 139);
        transform: translateY(-10px);
      }
    }
    .editBtn {
      border-radius: none;
      position: absolute;
      right: 20px;
      bottom: 10px;
    }
  }
}
</style>
